<template>
	<view class="">
		<view class="pagesBox">
			<view class="pagesMain">
				<view class="popupInput">
					<view class="inoutTitle">本人银行卡号</view>
					<u-input v-model="params.bank_number" placeholder="请输入本人银行卡号" :clearable="false" :custom-style="inputStyle" type="number" :border='false' :height="96"></u-input>
				</view>
				<view class="popupInput">
					<view class="inoutTitle">开户行</view>
					<u-input v-model="params.bank_name" placeholder="请输入开户行" :clearable="false" :custom-style="inputStyle" type="text" :border='false' :height="96"></u-input>
				</view>
				<view class="popupInput">
					<view class="inoutTitle">持卡人姓名</view>
					<u-input v-model="params.bank_account" placeholder="请输入真实姓名" :clearable="false" :custom-style="inputStyle" type="text" :border='false' :height="96"></u-input>
				</view>
				<view class="popupInput">
					<view class="inoutTitle">持卡人身份证号</view>
					<u-input v-model="params.bank_idcard" placeholder="请输入身份证号" :clearable="false" :custom-style="inputStyle" type="number" :border='false' :height="96"></u-input>
				</view>
				<view class="popupInput">
					<view class="inoutTitle">持卡人预留手机号</view>
					<u-input v-model="params.bank_phone" placeholder="请输入银行预留手机号" :clearable="false" :custom-style="inputStyle" type="number" :border='false' :height="96"></u-input>
				</view>
			</view>
			<my-submitBtn v-if="!bank_number" :isFixed="false" btnText="确认添加" @click="submitBefore"></my-submitBtn>
			<my-submitBtn v-if="bank_number" :isFixed="false" btnText="确认修改" @click="submitBefore"></my-submitBtn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				inputStyle:{background:'#F7F8FA',borderRadius:'6rpx',paddingLeft:'24rpx',fontSize: '32rpx'},
				params:{
					bank_account:"",
					bank_name:"",
					bank_number:"",
					bank_idcard:"",
					bank_phone:""
				},
				bank_number:"",
				time:""
			};
		},
		onLoad(options) {
			this.getScoreInfo()
		},
		methods:{
			async getScoreInfo(){
				let res = await uni.$http('POST','score/index');
				console.log("积分信息",res);
				if(res.code == 1){
					this.bank_number = res.data.bank_number || "";
					this.params.bank_account = res.data.bank_account || "";
					this.params.bank_name = res.data.bank_name || "";
					this.params.bank_number = res.data.bank_number || "";
					this.params.bank_idcard = res.data.bank_idcard || "";
					this.params.bank_phone = res.data.bank_phone || "";
				}else if(res.msg.includes('登录')){
					uni.setStorageSync('token',0);
				}
			},
			submitBefore(){
				if(!this.params.bank_number){
					uni.$u.toast('请输入银行卡号')
				}else if(!this.params.bank_name){
					uni.$u.toast('请输入开户行')
				}else if(!this.params.bank_account){
					uni.$u.toast('请输入持卡人姓名')
				}else if(!this.params.bank_idcard){
					uni.$u.toast('请输入持卡人身份证号')
				}else if(!this.params.bank_phone){
					uni.$u.toast('请输入持卡人预留手机号')
				}else{
					if(this.time){
						clearTimeout(this.time)
						this.time = '';
					}
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					this.time = setTimeout(()=>{
						this.submit()
					},500)
				}
			},
			async submit(){
				let res = await uni.$http('POST','score/editBank',this.params)
				console.log('添加银行卡',res);
				uni.hideLoading()
				uni.$u.toast(res.msg)
				if(res.code == 1){
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	padding: 12rpx 24rpx;
	position: relative;
	.pagesMain{
		background-color: #fff;
		border-radius: 12rpx;
		padding: 12rpx 24rpx;
		margin-bottom: 36rpx;
		.popupInput{
			margin-bottom: 32rpx;
			position: relative;
			.inoutTitle{
				font-weight: 600;
				font-size: 28rpx;
				color: #16202B;
				margin-bottom: 10rpx;
			}
			.kuang{
				height: 96rpx;
				line-height: 96rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #303133;
				background-color: #F7F8FA;
				// border: 2rpx solid #dcdfe6;
				border-radius: 6rpx;
				padding-left: 24rpx;
			}
			.slot-btn{
				width: calc(100vw - 124rpx);
				height: 240rpx;
				border: #eee solid 2rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.uploadCount{
					color: #A1A5AA;
					font-size: 24rpx;
					margin-top: 6rpx;
				}
			}
			// 选择类型
			.tagBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tagItem{
					width: 32.5%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-weight: 400;
					font-size: 30rpx;
					color: #444C55;
					background: #F7F8FA;
					border-radius: 16rpx;
					border: 2rpx solid #E7E8E9;
				}
				.active{
					font-weight: 600;
					font-size: 30rpx;
					color: #F77B39;
					background: #FEEADF;
				}
			}
			// 字数
			.textNum{
				color: #A1A5AA;
				position: absolute;
				bottom: 12rpx;
				right: 16rpx;
			}
		}
	}
}
</style>
<style>
	page{
		background-color: #F7F8FA;
	}
</style>